$(function () {
    local()
    //所选商品('购物车使用')
    let good = JSON.parse(localStorage.getItem('shoppingCurrent')) || {}
    //获取当前商品信息('购买使用')
    localStorage.setItem('goodCurrent', JSON.stringify({ productId: good.id, size: 0, num: 0 }))

    //初始化页面
    initGood(good)

    //点击加入购物车
    $(document).on('tap', '#joinShop', (e) => {
        let goodCurrent = JSON.parse(localStorage.getItem('goodCurrent'))
        if (parseInt(goodCurrent.size) === 0) {
            mui.toast('请先选择尺码!')
            return
        }
        if (parseInt(goodCurrent.num) === 0) {
            mui.toast('请先选择所需个数!')
            return
        }
        $.ajax({
            type: 'POST',
            url: '/cart/addCart',
            data: {
                productId: goodCurrent.productId,
                num: parseInt(goodCurrent.num),
                size: goodCurrent.size
            },
            success: (result) => {
                if (result.error) {
                    mui.toast(result.message)
                } else {
                    mui.toast('已成功加入购物车!')
                }
            }
        })
        // //获取本地购物车
        // let shopCar = JSON.parse(localStorage.getItem('shopCar')) || []
        // //判断购物车是否已有此商品
        // if (shopCar.length !== 0) {
        //     for (let s in shopCar) {
        //         if (shopCar[s] === good.id) {
        //             $(e.target).removeClass('span_active')
        //             localStorage.setItem('shopCar', JSON.stringify(shopCar.filter(item => item != good.id)))
        //             mui.toast('已移除购物车')
        //             return
        //         }
        //     }
        //     $(e.target).addClass('span_active')
        //     shopCar.push(good.id)
        //     mui.toast('已加入购物车')
        //     localStorage.setItem('shopCar', JSON.stringify(shopCar))
        // } else {
        //     $(e.target).addClass('span_active')
        //     shopCar.push(good.id)
        //     mui.toast('已加入购物车')
        //     localStorage.setItem('shopCar', JSON.stringify(shopCar))
        // }

    })

})
function initGood(good) {
    let str = `
            <li class="mui-table-view-cell">
                <div class="mui-slider">

                <div class="mui-slider-group mui-slider-loop">
                            <div class="mui-slider-group mui-slider-loop">  
                                ${upPic(good.pic)}
                            </div>
                            <div class="mui-slider-indicator">
                                ${upCri(good.pic.length)}
                            </div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <sapn>${good.proName}</sapn>
            </li>
            <li class="mui-table-view-cell">
                <sapn class="price-title">价格:</sapn>
                <sapn class="price">￥ ${good.price}</sapn>
                <del class="price-old">￥ ${good.oldPrice}</del>
            </li>
            <li class="mui-table-view-cell btns">
                <button class="btns_title" disabled="disabled"><span>尺码:</span></button>
                ${upBtn(good.size)}
            </li>
            <li class="mui-table-view-cell btns">
                <sapn>数量:</sapn>
                <div class="mui-numbox" data-numbox-min="0" data-numbox-max="${good.num}">
                    <button class="mui-btn mui-numbox-btn-minus" type="button" id="numBox">-</button>
                    <input class="mui-numbox-input" type="number" />
                    <button class="mui-btn mui-numbox-btn-plus" type="button" id="numBox">+</button>
                </div>
                <sapn>库存:${good.num}</sapn>
            </li>
            <li class="mui-table-view-cell btn-buy">
                <button type="button" class="mui-btn mui-btn-primary" id="buy">购买</button>
                <sapn class="fa fa-cart-plus" id="joinShop" aria-hidden="true"></sapn>
            </li>
    `
    $('#good').html(str)
    mui('.mui-numbox').numbox()

    //点击选择或取消尺码
    $(document).on('tap', '#numBtn', (e) => {
        let goodCurrent = JSON.parse(localStorage.getItem('goodCurrent'))
        let className = '.numBtn' + goodCurrent.size
        if (goodCurrent.size != 0) {
            $(className).removeClass('btn_bc')
        }
        goodCurrent.size = e.currentTarget.dataset.id
        localStorage.setItem('goodCurrent', JSON.stringify(goodCurrent))
        className = '.numBtn' + goodCurrent.size
        $(className).addClass('btn_bc')

    })

    //点击更新本地num
    $(document).on('tap', '#numBox', () => {
        let goodCurrent = JSON.parse(localStorage.getItem('goodCurrent'))
        goodCurrent.num = mui('.mui-numbox').numbox().getValue()
        localStorage.setItem('goodCurrent', JSON.stringify(goodCurrent))
    })
}
//动态加载轮播图图片
function upPic(pic) {
    let str = ``
    str += `<!--支持循环，需要重复图片节点-->
            <div class="mui-slider-item mui-slider-item-duplicate"><img
                src="${pic[pic.length - 1].picAddr}" />
            </div>`
    for (let p in pic) {
        str += `<div class="mui-slider-item"><img src="${pic[p].picAddr}" /></div>`
    }
    str += `<!--支持循环，需要重复图片节点-->
            <div class="mui-slider-item mui-slider-item-duplicate"><img
                        src="${pic[0].picAddr}" />
            </div>`
    return str
}

//动态加载轮播图圆点
function upCri(num) {
    if (num === 1) {
        return
    }
    let str = `<div class="mui-indicator mui-active"></div>`
    for (let n in (num - 1)) {
        str += `<div class="mui-indicator"></div>`
    }
    return str
}

//动态加载尺码大小按钮
function upBtn(goodSize) {
    goodSize = JSON.stringify(goodSize)
    let arr = goodSize.slice(1, goodSize.length - 1).split('-')
    if (arr.length !== 2) {
        return '无相关尺寸'
    }
    let str = ``
    let min = parseInt(arr[0])
    let max = parseInt(arr[1])
    for (let j = min; j <= max; j++) {
        str += `
            <button class="numBtn${j}" data-id="${j}" id="numBtn">${j}</button>
        `
    }
    return str
}

// //判断当前商品是否已加入购物车
// function shoppingIsInCar(good) {
//     //获取本地购物车
//     let shopCar = JSON.parse(localStorage.getItem('shopCar')) || []
//     if (shopCar.length === 0) {
//         return ''
//     }
//     for (let s in shopCar) {
//         if (shopCar[s].id === good.id) {
//             return ' span_active'
//         }
//     }
// }

//购买购物车商品
$(document).on('tap', '#buy', () => {
    mui.alert('<img src="/mobile/images/微信图片_20220714174605.jpg" width="248px" height="336px">', '打钱', () => {
        return
    })
})